<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            Slack
        </h2>
        <section class="view-actions">
            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-blue gh-btn-icon" data-test-save-button={{true}} />
        </section>
    </GhCanvasHeader>

    {{#if this.showLeaveSettingsModal}}
        <GhFullscreenModal @modal="leave-settings"
            @confirm={{action "leaveSettings"}}
            @close={{action "toggleLeaveSettingsModal"}}
            @modifier="action wide" />
    {{/if}}

    <section class="view-container bt b--lightgrey-d1 pt5">
        <section class="app-grid">
            <div class="app-cell">
                <div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3">
                    <img class="app-icon" src="assets/img/slackicon.png" />
                </div>
            </div>
            <div class="app-cell">
                <h3>Slack</h3>
                <p>A messaging app for teams</p>
            </div>
        </section>

        <form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>
            <div class="gh-setting-header gh-first-header">Slack configuration</div>

                <div class="flex flex-column br4 shadow-1 bg-grouped-table pa8 mt2">
                <div class="gh-setting-first">
                    <div class="gh-setting-content gh-setting-content--no-action">
                        <div class="gh-setting-title">Webhook URL</div>
                        <div class="gh-setting-desc">Automatically send newly published posts to a channel in Slack or any Slack-compatible service like Discord or Mattermost.</div>
                        <div class="gh-setting-content-extended">
                            <GhFormGroup @errors={{this.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="url">
                                <GhTextInput
                                    @placeholder="https://hooks.slack.com/services/..."
                                    @name="slack[url]"
                                    @value={{readonly this.slackSettings.url}}
                                    @input={{action "updateURL" value="target.value"}}
                                    @keyEvents={{hash
                                        Enter=(action "save")
                                    }}
                                    @focus-out={{action "triggerDirtyState"}}
                                    data-test-slack-url-input={{true}}
                                />
                                {{#unless this.slackSettings.errors.url}}
                                    <p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank">here</a>, and grab the URL.</p>
                                {{else}}
                                    <GhErrorMessage @errors={{this.slackSettings.errors}} @property="url" data-test-error="slack-url" />
                                {{/unless}}
                            </GhFormGroup>
                        </div>
                    </div>
                </div>
                <div class="gh-setting">
                    <div class="gh-setting-content gh-setting-content--no-action">
                        <div class="gh-setting-title">Username</div>
                        <div class="gh-setting-desc">The username to display messages from</div>
                        <div class="gh-setting-content-extended">
                            <GhFormGroup @errors={{this.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="username">
                                <GhTextInput
                                    @placeholder="Ghost"
                                    @name="slack[username]"
                                    @value={{readonly this.slackSettings.username}}
                                    @input={{action "updateUsername" value="target.value"}}
                                    @keyEvents={{hash
                                        Enter=(action "save")
                                    }}
                                    @focus-out={{action "triggerDirtyState"}}
                                    data-test-slack-username-input={{true}}
                                />
                                {{#if this.slackSettings.errors.username}}
                                    <GhErrorMessage @errors={{this.slackSettings.errors}} @property="username" />
                                {{/if}}
                            </GhFormGroup>
                        </div>
                        <GhTaskButton @buttonText="Send test notification" @task={{this.sendTestNotification}} @successText="Sent" @class="gh-btn gh-btn-green gh-btn-icon" @disabled={{this.testNotificationDisabled}} data-test-send-notification-button="true" />
                    </div>
                </div>
            </div>
        </form>
    </section>
</section>
